<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: green;
        margin: 20px;
        -webkit-filter: url(#merge);
        filter: url(#merge);
      }
    </style>
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1">
      <defs>
        <filter id="merge" color-interpolation-filters="sRGB">
          <feColorMatrix type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0.3 0"  result="trans"/>
          <feOffset dx="-80" dy="-80" in="trans" x="50" y="50" width="150" height="150" result="offsetNeg"/>
          <feOffset dx="80" dy="80" in="trans" x="0" y="0" width="150" height="150" result="offsetPos"/>
          <feMerge x="40" y="40" width="120" height="120">
            <feMergeNode in="offsetNeg"/>
            <feMergeNode in="offsetPos"/>
          </feMerge>
        </filter>
      </defs>
    </svg>
    <div class="box"></div>
  </body>
</html>
